<template>
    <div>
        <el-divider content-position="center">其他</el-divider>
        <div class="row">
            <span class="row-label">折叠菜单</span>
            <div class="themeAction">
                <el-switch v-model="SettingStore.isCollapse" @change="toogle($event, 'isCollapse')" size="large"
                    inline-prompt />
            </div>
        </div>
        <div class="row">
            <span class="row-label">导航标签</span>
            <div class="themeAction">
                <el-switch v-model="SettingStore.isBreadcrumd" @change="toogle($event, 'isBreadcrumd')" size="large"
                    inline-prompt />
            </div>
        </div>
    </div>
</template>

<script lang='ts' setup>
import { useSetting } from '@/pinia/setting';
const SettingStore = useSetting()
const toogle = (val: boolean, type: string) => {
    if (type === "isCollapse") {
        SettingStore.setCollapse(val)
        return
    }
   
}
</script>

<style lang="less" scoped>
.flex-center {
    display: flex;
    justify-content: center;
    align-items: center;
}

.row {
    display: flex;
    justify-content: center;

    .row-label {
        width: 40%;
        align-items: right;
        .flex-center();
        justify-content: flex-end;
    }

    .themeAction {
        width: 60%;
        align-items: center;
        .flex-center();
    }
}

.row+.row {
    margin-top: 20px;
}
</style>